<template>
	<view class="into_car">
		<xbd-pages-content title="title">
			<template #content>
				<view class="content" :style="'minHeight:'+windowHeight+'px'">
					<view class="head">
						<view class="type">
							<view class="left">
								配送车辆
							</view>
							<view class="right">
								{{car_name}}
							</view>
						</view>
						<view class="state">
							<view class="text">
								请选择格口
							</view>
							<view class="box">
								<view :class="['button', num === index ? 'active' : '']" v-for="(item,index) in car_list" :key="index" @click='boxClick(index,item.box_index)'>
									{{item.box_index}}
								</view>
							</view>
						</view>

					</view>
					<xbd-popup :isShow="showDialog1" @dialogConfirm="dialogConfirm1" @dialogCancel="dialogCancel1"
						content="确定要打开这个格口吗？" cancelText="取消" confirmText="确定">
					</xbd-popup>
					<xbd-popup :isShow="showDialog2" @dialogConfirm="dialogConfirm2" @dialogCancel="dialogCancel2"
						content="是否已放入这些格口中了？" cancelText="取消" confirmText="确定">
					</xbd-popup>
					<view class="bottom">
						<view class="button" @click="cancel()">
							取消操作
						</view>
						<view class="button bt2"  @click="intoCar()" >
							确认入车
						</view>
					</view>
				</view>

			</template>
		</xbd-pages-content>
	</view>
</template>

<script>
	import { DeliveryOrder } from '@/api/index.js';
	export default {
		data() {
			return {
				flag:true,
				num:1000,
				car_name:'',
				car_id:'',
				id:'',
				chooseBox:'',
				car_list:[],
				title: '订单入车',
				showDialog1: false,
				showDialog2: false,
				windowHeight:0,
				openBox:true,
			};
		},
		methods: {
			intoCar() {
				if(this.chooseBox.length === 0){
					this.$showToast('请选择格口！');
				}else{
					this.showDialog2= true
				}
			},
			
				
			cancel(){
				uni.navigateBack({
					delta: 1
				});
			},
			
			boxClick(index,val) {
				if(this.openBox){
					this.num = index
					this.chooseBox = val
					this.showDialog1 = true
				}
				
			},
			dialogConfirm1() {
				//弹出框再等等操作
				this.postOpen()
				this.showDialog1 = false;
				
			},
			dialogCancel1() {
				this.chooseBox = '';
				this.num = 100;
				this.showDialog1 = false;
				this.openBox = true
			},
			// 发出操作
			//取消操作
			dialogConfirm2() {
				//弹出框再等等操作
				this.postPutCar()
				this.showDialog2 = false;
			},
			dialogCancel2() {
				this.showDialog2 = false;

			},
			async getCabinet(){
				try{
					this.$showLoading('加载中');
					const res = await DeliveryOrder.getCarCabinet(this.car_id)
					uni.hideLoading();
					this.car_list = res.data.list
				}catch(e){
					//TODO handle the exception
				}
			},
			// 打开格口
			async postOpen(){
				const info={
					box_index:this.chooseBox,
					car_id:this.car_id
				}
				if(this.flag){
				try{
					this.flag = false
					this.$showLoading('加载中');
					const res = await DeliveryOrder.postOpen(info)
					uni.hideLoading();
					if(res.success){
						this.openBox = false
						this.flag = true
						uni.showToast({
							title: res.msg,
							icon: 'none',
						})
					}else{
						this.chooseBox = ''
						this.openBox = true
						this.num=1000
						this.flag = true
						uni.showToast({
							title: res.msg,
							icon: 'none',
						})
					}
					
				}catch(e){
					//TODO handle the exception
				}
				}
			},
			// 确认入车
			async postPutCar(){
				const info={
					order_id: this.id ,
					box_index:this.chooseBox,
					car_id:this.car_id
				}
				if(this.flag){
				try{
					this.flag = false
					this.$showLoading('加载中');
					const res = await DeliveryOrder.postPutCar(info)
					if(res.success){
						this.flag = true
						uni.navigateBack({
							delta: 1
						});
						uni.$emit('intoCar', info.car_id , info.order_id)
					}else{
						this.flag = true
						uni.showToast({
							title: res.msg,
							icon: 'none',
						})
					}
				}catch(e){
					uni.hideLoading();
					//TODO handle the exception
				}
				}
			}
		},
		computed: {},
		onLoad(res) {
			uni.getSystemInfo({
				     success:(res) =>{
						 this.windowHeight = res.windowHeight
				     }
				 });
			this.id = res.id
			this.car_id = res.car
			this.car_name = res.name
			this.getCabinet()
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 50rpx 0;
		box-sizing: border-box;
		background-color: #FFFFFF;
			.head{
				
				padding: 0 40rpx;
				box-sizing: border-box;
				background-color:#FFFFFF;
			}
		.type {

			display: flex;
			font-size: 28rpx;
			margin-bottom: 20rpx;
			color: #394954;

			.left {
				margin-right: 30rpx;
			}
		}
		.state{
			font-size: 28rpx;
			.text{
				margin: 40rpx 0;
			}
			.box{
				margin-top: 20rpx;
				display: flex;
				flex-wrap: wrap;
				.button{
					width: 120rpx;
					height: 44rpx;
					line-height: 40rpx;
					text-align: center;
					background-color: #457AFF;
					border-radius: 8rpx;
					margin:0 20rpx 60rpx 20rpx;
					color: #FFFFFF;
					&.active{
						background-color: rgba(69, 122, 255, .5) !important;
					}
				}
			}
		}
		
		.bottom{
			display: flex;
			padding: 0 120rpx;
			justify-content: space-between;
			margin-top: 200rpx;
			// white-space: nowrap;
			.button{
				font-size: 24rpx;
				width: 180rpx;
				height: 56rpx;
				line-height: 52rpx;
				text-align: center;
				border-radius: 8rpx;
				border: 2rpx solid  #457AFF;
				color:#457AFF ;
			}
			.bt2{
				background-color: #457AFF !important;
				color:#FFFFFF !important;
			}
		}
	}
</style>
